<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
	<meta charset="utf-8">
	<!-- 优先使用IE最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!-- 360 浏览器内核控制 -->
	<meta name="renderer" content="webkit|ie-comp|ie-stand">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- SEO 三项优化 -->
	<!-- 页面描述 -->
	<meta name="description" content="" />
	<!-- 页面关键词 -->
	<meta name="keywords" content=""/>
	<!-- 页面标题 -->
	<title>Bootstrap栅格系统</title>
	<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="docs-assets/css/docs.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
	<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
</head>

<body>
	<div class="container">
		<h1>Bootstrap框架中的栅格系统</h1>
		<p class="lead">
			栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：
		</p>
		<ul>
			<li>
				“行（row）”必须包含在
				<code>.container</code>
				中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用“行（row）”在水平方向创建一组“列（column）”。
			</li>
			<li>你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。</li>
			<li>
				使用
				<code>.row</code>
				and
				<code>.col-xs-4</code>
				这些预定义的栅格class可以用来快速创建栅格布局。
			</li>
			<li>
				栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
				<code>.col-xs-4</code>
				来创建。
			</li>
		</ul>
		<div class="row show-grid">
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
		</div>
		<div class="row show-grid">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-4">.col-md-4</div>
		</div>
		<div class="table-responsive">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th></th>
						<th>
							超小屏幕设备
							<small>手机 (&lt;768px)</small>
						</th>
						<th>
							小屏幕设备
							<small>平板 (&ge;768px)</small>
						</th>
						<th>
							中等屏幕设备
							<small>桌面 (&ge;992px)</small>
						</th>
						<th>
							大屏幕设备
							<small>桌面 (&ge;1200px)</small>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th>栅格系统行为</th>
						<td>总是水平排列</td>
						<td colspan="3">开始是堆叠在一起的，超过这些阈值将变为水平排列</td>
					</tr>
					<tr>
						<th>
							最大
							<code>.container</code>
							宽度
						</th>
						<td>None (自动)</td>
						<td>750px</td>
						<td>970px</td>
						<td>1170px</td>
					</tr>
					<tr>
						<th>class前缀</th>
						<td>
							<code>.col-xs-</code>
						</td>
						<td>
							<code>.col-sm-</code>
						</td>
						<td>
							<code>.col-md-</code>
						</td>
						<td>
							<code>.col-lg-</code>
						</td>
					</tr>
					<tr>
						<th>列数</th>
						<td colspan="4">12</td>
					</tr>
					<tr>
						<th>最大列宽</th>
						<td class="text-muted">自动</td>
						<td>60px</td>
						<td>78px</td>
						<td>95px</td>
					</tr>
					<tr>
						<th>槽宽</th>
						<td colspan="4">30px (每列左右均有15px)</td>
					</tr>
					<tr>
						<th>可嵌套</th>
						<td colspan="4">Yes</td>
					</tr>
					<tr>
						<th>偏移（Offsets）</th>
						<td colspan="4">Yes</td>
					</tr>
					<tr>
						<th>列排序</th>
						<td colspan="4">Yes</td>
					</tr>
				</tbody>
			</table>
			<p>
				栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何一个元素应用任何
				<code>.col-md-</code>
				class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置
				<code>.col-lg-</code>
				class的话）。
			</p>
			<div class="row show-grid">
				<div class="col-sm-4">.col-sm-4</div>
				<div class="col-sm-4">.col-sm-4</div>
				<div class="col-sm-4">.col-sm-4</div>
			</div>

      <div class="row show-grid">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>
      <div class="row show-grid">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      </div>

   <h3 id="grid-offsetting">列偏移</h3>
    <p>使用<code>.col-md-offset-*</code>可以将列偏移到右侧。这些class通过使用<code>*</code>选择器将所有列增加了列的左侧margin。例如，<code>.col-md-offset-4</code>将<code>.col-md-4</code>向右移动了4个列的宽度。</p>
    <div class="bs-docs-grid">
      <div class="row show-grid">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
      </div>
      <div class="row show-grid">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      </div>
      <div class="row show-grid">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
      </div>
    </div>

    <h3 id="grid-nesting">嵌套列</h3>
    <p>为了使用内置的栅格将内容嵌套，通过添加一个新的<code>.row</code>和一系列<code>.col-md-*</code>列到已经存在的<code>.col-md-*</code>列内即可实现。嵌套row所包含的列加起来应该等于12。</p>
    <div class="row show-grid">
      <div class="col-md-9">
        Level 1: .col-md-9
        <div class="row show-grid">
          <div class="col-md-3">
            Level 2: .col-md-3
          </div>
          <div class="col-md-6">
            Level 2: .col-md-6
          </div>
          <div class="col-md-3">
            Level 2: .col-md-3
          </div>
        </div>
      </div>
    </div>

		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>
